<template>
	<view class="promotion-card" @tap="handleClick">
		<view class="card-header">
			<view class="promotion-type">
				<cl-icon :name="typeIcon" size="16" :color="typeColor"></cl-icon>
				<text class="type-text">{{ typeText }}</text>
			</view>
			<view class="promotion-status" :class="statusClass">
				<text class="status-text">{{ promotion.statusText }}</text>
			</view>
		</view>

		<view class="card-content">
			<text class="promotion-title">{{ promotion.promName || promotion.title }}</text>
			<text class="promotion-desc">{{
				promotion.description || getDefaultDescription()
			}}</text>

			<!-- 秒杀活动详情 -->
			<view v-if="promotion.promType === 'MS' && promotion.details" class="type-content">
				<view
					v-for="(item, index) in promotion.details.slice(0, 2)"
					:key="index"
					class="seckill-item"
				>
					<view class="goods-info">
						<cl-image
							:src="'https://shop.sdamdyy.cn/' + (item.goodsInfo?.mainPic || '')"
							:alt="item.goodsInfo?.title"
							mode="aspectFill"
							class="goods-image"
							width="60rpx"
							height="60rpx"
							:lazy-load="true"
							fallback="/static/empty/no.jpg"
						/>
						<view class="goods-detail">
							<text class="goods-name">{{
								item.goodsInfo?.title || item.goodsInfo?.oracleGoodsName
							}}</text>
							<view class="price-row">
								<text class="seckill-price">¥{{ item.seckillPrice }}</text>
								<text class="original-price">¥{{ item.goodsInfo?.price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 套餐活动详情 -->
			<view v-else-if="promotion.promType === 'TC' && promotion.details" class="type-content">
				<view class="combo-grid">
					<view
						v-for="(item, index) in promotion.details.slice(0, 4)"
						:key="index"
						class="combo-item"
					>
						<cl-image
							:src="'https://shop.sdamdyy.cn/' + (item.goodsInfo?.mainPic || '')"
							:alt="item.goodsInfo?.title"
							mode="aspectFill"
							class="combo-image"
							width="40rpx"
							height="40rpx"
							:lazy-load="true"
							fallback="/static/empty/no.jpg"
						/>
						<text class="combo-num">x{{ item.num }}</text>
					</view>
				</view>
				<view v-if="promotion.totalPrice" class="combo-price">
					<text class="total-label">套餐价：</text>
					<text class="total-price">¥{{ promotion.totalPrice }}</text>
				</view>
			</view>

			<!-- 满减活动详情 -->
			<view v-else-if="promotion.promType === 'MJ' && promotion.details" class="type-content">
				<view
					v-for="(item, index) in promotion.details.slice(0, 2)"
					:key="index"
					class="reduction-item"
				>
					<text class="reduction-text">满{{ item.taxAmount }}减{{ item.dedRate }}</text>
				</view>
			</view>

			<!-- 买赠活动详情 -->
			<view v-else-if="promotion.promType === 'MZ' && promotion.details" class="type-content">
				<view
					v-for="(item, index) in promotion.details.slice(0, 1)"
					:key="index"
					class="gift-item"
				>
					<text class="gift-text">买{{ item.num }}赠{{ item.freeNum }}</text>
					<text class="gift-goods">{{ item.freeGoodsInfo?.title || "精美赠品" }}</text>
				</view>
			</view>

			<view class="promotion-info">
				<view class="discount-info">
					<text class="discount-text">{{ promotion.discountText }}</text>
				</view>
				<view class="time-info" v-if="promotion.remainingTime">
					<cl-icon name="clock" size="12" color="#ff4757"></cl-icon>
					<text class="time-text">{{ promotion.remainingTime }}</text>
				</view>
			</view>
		</view>

		<view class="card-footer">
			<view class="participation-info">
				<text class="participants">已有{{ promotion.participantCount || 0 }}人参与</text>
			</view>
			<view class="action-btn" @tap.stop="handleJoin">
				<text class="action-text">{{ actionText }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from "vue";

interface Props {
	promotion: any;
}

const props = defineProps<Props>();

const emit = defineEmits<{
	click: [promotion: any];
	join: [promotion: any];
}>();

const typeIcon = computed(() => {
	switch (props.promotion.promType) {
		case "MS": // 秒杀
			return "zap";
		case "TC": // 套餐
			return "package";
		case "MJ": // 满减
			return "ticket";
		case "MZ": // 买赠
			return "gift";
		default:
			return "tag";
	}
});

const typeColor = computed(() => {
	switch (props.promotion.promType) {
		case "MS": // 秒杀
			return "#ff4757";
		case "TC": // 套餐
			return "#722ed1";
		case "MJ": // 满减
			return "#52c41a";
		case "MZ": // 买赠
			return "#1890ff";
		default:
			return "#fa8c16";
	}
});

const typeText = computed(() => {
	switch (props.promotion.promType) {
		case "MS": // 秒杀
			return "限时秒杀";
		case "TC": // 套餐
			return "套餐优惠";
		case "MJ": // 满减
			return "满减优惠";
		case "MZ": // 买赠
			return "买赠活动";
		default:
			return "特惠活动";
	}
});

const statusClass = computed(() => {
	// Use the statusText that's already computed in the parent component
	switch (props.promotion.statusText) {
		case "进行中":
			return "active";
		case "未开始":
			return "pending";
		case "已结束":
		case "已停用":
			return "ended";
		default:
			return "unknown";
	}
});

const actionText = computed(() => {
	switch (props.promotion.promType) {
		case "MS": // 秒杀
			return "立即抢购";
		case "TC": // 套餐
			return "查看套餐";
		case "MJ": // 满减
			return "去凑单";
		case "MZ": // 买赠
			return "立即购买";
		default:
			return "查看详情";
	}
});

// 方法
function handleClick() {
	emit("click", props.promotion);
}

function handleJoin() {
	emit("join", props.promotion);
}

function getDefaultDescription() {
	switch (props.promotion.promType) {
		case "MS":
			return "限时秒杀，手快有手慢无";
		case "TC":
			return "超值套餐，组合更优惠";
		case "MJ":
			return "满额立减，多买多优惠";
		case "MZ":
			return "买就送，惊喜好礼等你来";
		default:
			return "限时优惠，机会难得";
	}
}
</script>

<style lang="scss" scoped>
.promotion-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
	}
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
	border-bottom: 1rpx solid #f5f5f5;
}

.promotion-type {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.type-text {
	font-size: 22rpx;
	font-weight: 500;
	color: #1a1a1a;
}

.promotion-status {
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	font-size: 20rpx;

	&.active {
		background-color: #f6ffed;
		color: #52c41a;
	}

	&.pending {
		background-color: #fff7e6;
		color: #fa8c16;
	}

	&.ended {
		background-color: #fff2f0;
		color: #ff4d4f;
	}

	&.unknown {
		background-color: #f5f5f5;
		color: #999;
	}
}

.status-text {
	font-size: 20rpx;
	font-weight: 500;
}

.card-content {
	padding: 24rpx;
}

.promotion-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.4;
	margin-bottom: 12rpx;
	display: block;
}

.promotion-desc {
	font-size: 24rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 16rpx;
	display: block;
}

.promotion-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.discount-info {
	flex: 1;
}

.discount-text {
	font-size: 32rpx;
	font-weight: 700;
	color: #ff4757;
}

.time-info {
	display: flex;
	align-items: center;
	gap: 6rpx;
}

.time-text {
	font-size: 20rpx;
	color: #ff4757;
}

.card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16rpx 24rpx;
	background-color: #fafbfc;
	border-top: 1rpx solid #f5f5f5;
}

.participation-info {
	flex: 1;
}

.participants {
	font-size: 22rpx;
	color: #999;
}

.action-btn {
	padding: 12rpx 24rpx;
	border-radius: 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
	}
}

.action-text {
	font-size: 22rpx;
	font-weight: 500;
	color: #ffffff;
}

// 促销类型特定内容样式
.type-content {
	margin: 20rpx 0;
	padding: 16rpx;
	background-color: #f8f9fa;
	border-radius: 12rpx;
}

// 秒杀样式
.seckill-item {
	margin-bottom: 16rpx;

	&:last-child {
		margin-bottom: 0;
	}

	.goods-info {
		display: flex;
		align-items: center;
		gap: 16rpx;

		.goods-image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 8rpx;
			flex-shrink: 0;
		}

		.goods-detail {
			flex: 1;

			.goods-name {
				font-size: 24rpx;
				color: #333;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 8rpx;
			}

			.price-row {
				display: flex;
				align-items: center;
				gap: 12rpx;

				.seckill-price {
					font-size: 28rpx;
					font-weight: 600;
					color: #ff4757;
				}

				.original-price {
					font-size: 22rpx;
					color: #999;
					text-decoration: line-through;
				}
			}
		}
	}
}

// 套餐样式
.combo-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
	margin-bottom: 16rpx;

	.combo-item {
		position: relative;

		.combo-image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 8rpx;
		}

		.combo-num {
			position: absolute;
			bottom: -4rpx;
			right: -4rpx;
			background-color: #722ed1;
			color: #fff;
			font-size: 18rpx;
			padding: 2rpx 6rpx;
			border-radius: 8rpx;
		}
	}
}

.combo-price {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;

	.total-label {
		font-size: 24rpx;
		color: #666;
	}

	.total-price {
		font-size: 32rpx;
		font-weight: 600;
		color: #722ed1;
	}
}

// 满减样式
.reduction-item {
	display: inline-block;
	margin-right: 16rpx;
	margin-bottom: 8rpx;

	.reduction-text {
		padding: 8rpx 16rpx;
		background-color: #f6ffed;
		color: #52c41a;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-weight: 500;
	}
}

// 买赠样式
.gift-item {
	.gift-text {
		display: block;
		font-size: 26rpx;
		font-weight: 500;
		color: #1890ff;
		margin-bottom: 8rpx;
	}

	.gift-goods {
		display: block;
		font-size: 22rpx;
		color: #666;
	}
}
</style>
